<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                  <a-input placeholder="" v-model="queryParam.roleName"></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="8" :sm="24">
                  <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
                  <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
                  <a-button v-has="'role:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form>
        </div>

        <div style="margin-top: 15px">
          <a-table
            style="height:500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">
            <span slot="isEnable" slot-scope="text, record">
              <a-switch
                checked-children="启用"
                un-checked-children="禁用"
                :checked="record.isEnable === 1"
                @click="isEnableEdit(record)"/>
            </span>
            <span slot="action" slot-scope="text, record">
              <a @click="handleRoleUser(record)">成员</a>
              <a-divider type="vertical"/>
              <a v-has="'role:edit'" @click="handleEdit(record)" v-if="!record.isDefault || isSuperTenant">编辑</a>
              <a v-has="'role:queryById'" @click="handleDetail(record)" v-else>查看</a>
              <a-divider type="vertical"/>
              <a v-has="'role:authAssign'" @click="handleTenantPermission(record)">权限分配</a>
              <a-divider type="vertical" v-if="!record.isDefault || isSuperTenant"/>
              <a-popconfirm v-has="'role:delete'" title="确定删除吗?" @confirm="() => doDelete(record.id)" v-if="!record.isDefault || isSuperTenant">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
        <app-role-modal ref="modalForm" @ok="modalFormOk"></app-role-modal>
        <role-permission-modal ref="modalRolePermission" @ok="modalFormOk"></role-permission-modal>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin.js'
  import AppRoleModal from './modules/AppRoleModal.vue'
  import RolePermissionModal from './modules/RolePermissionModal.vue'
  import moment from 'moment'
  import Vue from 'vue';
  import { IS_SUPER_TENANT } from '@/store/mutation-types'
  import { api, startUsing } from './service.js';

  export default {
    name: 'AppRoleList',
    mixins: [JeecgListMixin],
    components: {
      AppRoleModal,
      RolePermissionModal,
      moment
    },
    data() {
      let that = this;
      return {
        disableMixinCreated: true,
        isSuperTenant: Vue.ls.get(IS_SUPER_TENANT),
        appList: [],
        currentRoleId: '',
        columns:
          [
            {
              title: '#',
              dataIndex: '',
              key: 'rowIndex',
              width: 60,
              align: 'center',
              customRender: function (t, r, index) {
                return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
              }
            }, {
              title: '角色名称',
              dataIndex: 'roleName'
            },
            {
              title: '角色编码',
              dataIndex: 'roleCode'
            },
            {
              title: '是否默认角色',
              align: 'center',
              dataIndex: 'isDefault',
              customRender: function(text) {
                if (text === 1) {
                  return '是'
                } else if (text === 0) {
                  return '否'
                } else {
                  return text
                }
              }
            },
            {
              title: '状态',
              dataIndex: 'isEnable',
              align: 'center',
              scopedSlots: { customRender: 'isEnable' }
            },
            {
              title: '归属应用',
              dataIndex: 'appName'
            },
            {
              title: '操作',
              dataIndex: 'action',
              align: 'center',
              scopedSlots: { customRender: 'action' }
            }
          ],
        url: {
          list: api.list,
          delete: ''
        }
      }
    },
    computed: {

    },
    created () {
      this.queryParam.appId = this.$route.params.id;
      this.searchQuery();
    },
    methods: {
      isEnableEdit(formData) {
        let that = this
        if (formData.isEnable === 1) {
          formData.isEnable = 0
        } else {
          formData.isEnable = 1
        }
        startUsing(formData).then((res) => {
          if (res.success) {
            that.$message.success('操作成功')
            that.$emit('ok')
            this.searchQuery();
          } else {
            that.$message.warning(res.message)
            if (formData.isEnable === 1) {
              formData.isEnable = 0
            } else {
              formData.isEnable = 1
            }
          }
        })
      },
      doDelete(id) {
        this.url.delete = api.delete(id);
        this.handleDelete(id)
        this.currentRoleId = ''
      },
      // 租户角色授权
      handleTenantPermission(record) {
        this.$refs.modalRolePermission.edit(record);
      },
      // 人员
      handleRoleUser(record) {
        this.$router.push({ name: 'app-roles-users', params: { roleId: record.id } })
      },
      handleAdd: function () {
        this.$refs.modalForm.add(this.queryParam.appId);
        this.$refs.modalForm.title = '新增';
        this.$refs.modalForm.disableSubmit = false;
      }
    }
  }
</script>
<style scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 8px
  }
</style>
